<!doctype html>
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<title>Examples and documentation on grumble.js</title>
	<meta name="description" content="Examples and documentation on grumble.js">
	<meta name="author" content="James Cryer">

	<link rel="stylesheet" href="css/grumble.min.css?v=5">

	<style>
		body {
			font-size: 16px;
			line-height: 24px;
			background: #fff;
			color: #330;
			font-family: "Georgia", FreeSerif, serif;
			padding-left: 30px;
			}
		#container {
			width: 690px;
			margin: 50px 0 50px 50px;
			}
		p, li {
			margin: 16px 0 16px 0;
			width: 550px;
			}
			p.break {
				margin-top: 35px;
				}
		a, a:visited {
			padding: 0 2px;
			text-decoration: none;
			background: #f7f7bb;
			color: #330;
			}
			a:active, a:hover {
				color: #000;
				background: #ff8;
				}
			.contact {
				background: transparent;
				color: #441;
				}
				.contact:active, .contact:hover {
					background: transparent;
					}
		h1, h2, h3, h4, h5, h6 {
			margin-top: 40px;
			display:inline-block;
			}
		b.header {
			font-size: 18px;
			}
		span.alias {
			font-size: 14px;
			font-style: italic;
			margin-left: 20px;
			}
		table {
			margin: 16px 0; padding: 0;
			}
			tr, td {
				margin: 0; padding: 0;
				}
				td {
					padding: 9px 15px 9px 0;
					}
					td.definition {
						line-height: 18px;
						font-size: 14px;
						}
		code, pre, tt {
			font-family: Consolas, "Lucida Console", monospace;
			font-size: 12px;
			line-height: 18px;
			color: #444;
			}
		code {
			margin-left: 20px;
			}
		pre {
			font-size: 12px;
			padding: 2px 0 2px 12px;
			border-left: 6px solid hotpink;
			margin: 0px 0 10px;
			}
		li pre {
			padding: 0;
			border-left: 0;
			margin: 6px 0 6px 0;
			}
		#diagram {
			margin: 20px 0 0 0;
			}
	</style>
	
	<style>
		.ex {
			display:inline-block;
			width: 150px;
			padding-left:3px;
			height:20px;
			border:1px solid #ddd;
			font-size: 12px;
			font-family: Consolas, "Lucida Console", monospace;
			}
			
		.grumble-button {
			font-size:11px;
			}
	</style>
	
</head>

<body>

	<div id="container">
		<header>
			<h1>grumble.js</h1>
		</header>
		<div id="main" role="main">
			<br/>
			<p>
				Originally written for <a href="http://www.huddle.com">Huddle.com</a>, 
				<a href="https://github.com/jamescryer/grumble.js">grumble.js</a> provides special tooltips
				without the usual limitations of north/east/south/west positioning.
			</p>
			<p>
				A grumble can be rotated around a given element at any angle, all 360 degrees.  
				Any distance can be specified.
				Any CSS style can be applied.
				There's auto-magic size adjustment for use with localised text.
				FX queues for animating multiple grumbles.
				And it works in IE6+, and modern browsers.
			</p>
			
			<p>grumble.js is currently written as a jquery plugin and can be found on <a href="https://github.com/jamescryer/grumble.js">Github</a></p>
			
			<pre>
$('h1').grumble({
	text: 'Bubble-tastic!', 
	angle: 85, 
	distance: 100, 
	showAfter: 500 
});</pre>
			
			<h2>Examples</h2>
			<p>
				The following code animates a set of grumbles, <a href="#" id="ex1">click here</a> to
				see it in action.
			</p>
			
			<span class="ex" id="grumble1">No text</span>
			<span class="ex" id="grumble2">Different style</span>
			<span class="ex" id="grumble3">With close button</span>
			<span class="ex" id="grumble4">Enlarged for text</span>
			
			<br/><br/>
			
			<pre>
$('#grumble1').grumble(
	{
		text: '', 
		angle: 200, 
		distance: 3, 
		showAfter: 1000,
		hideAfter: 2000
	}
);
$('#grumble2').grumble(
	{
		text: 'Ohh, blue...', 
		angle: 180, 
		distance: 0, 
		showAfter: 2000,
		type: 'alt-', 
		hideAfter: 2000
	}
);
$('#grumble3').grumble(
	{
		text: 'Click me!',
		angle: 150,
		distance: 3,
		showAfter: 3000,
		hideAfter: false,
		hasHideButton: true,
		buttonHideText: 'Pop!'
	}
);
$('#grumble4').grumble(
	{
		text: 'Whoaaa, this is a lot of text that i couldn\'t predict',
		angle: 85,
		distance: 50,
		showAfter: 4000,
		hideAfter: 2000,
	}
);
);</pre>
						
		</div>
		
		<p>
			Can I haz callbacks? Sure.
		</p>
		
		<pre>
$('#myElement').grumble({
	showAfter: 1000,
	hideAfter: 2000,
	onShow: function(){
		console.log('triggered when show animation completes');
	},
	onBeginHide: function(){
		console.log('triggered when hide animation begins');
	},
	onHide: function () { 
		console.log('triggered when hide animation completes');
	}
});
</pre>
		
		<h2 id="thedarkside">The darkside of grumble.js</h2>
		<p>
			grumble.js exposes three methods, 'show', 'hide' and 'adjust'. The adjust call allows you to update position and angle.
		</p>
		<p>
			Warning: Clicking on this link may damage your <abbr title="User Experience">UX</abbr>. <a href="#" id="darkside">(:p)</a>
		</p>
		<pre>
$('#darkside').click(function(e){
	var $me = $(this), interval;
	
	e.preventDefault();
	
	$me.grumble(
		{
			angle: 130,
			text: 'Look at me!',
			type: 'alt-', 
			distance: 10,
			hideOnClick: true,
			onShow: function(){
				var angle = 130, dir = 1;
				interval = setInterval(function(){
					(angle > 220 ? (dir=-1, angle--) : ( angle < 130 ? (dir=1, angle++) : angle+=dir));
					$me.grumble('adjust',{angle: angle});
				},25);
			},
			onHide: function(){
				clearInterval(interval);
			}
		}
	);
});
</pre>

		
		<h2>What is this magic?</h2>
		<p>
			grumble.js uses buzzwords like CSS3 and 'maths' to position itself exactly where you want it.
			Modern browsers use <a href="http://www.w3.org/TR/css3-2d-transforms/">CSS3 transforms</a> with IE6+ using non-standard <a href="http://msdn.microsoft.com/en-us/library/ms533014%28v=vs.85%29.aspx">Matrix filters</a>.
			Image spriting is used for actual bubble image, you can change this as you want - it's just CSS.
		</p>
		
		<h2>Credit due</h2>
		<p>
			Big thanks to everyone involved in creating the idea and design of grumble.js (aka. Huddle Bubbles). Let me know if you want explicit mention.
		</p>
		
		<footer>
			<br/>
			<br/>
			<p>Written by <a href="https://github.com/jamescryer">James Cryer</a></p>
			<p><a href="http://twitter.com/jamescryer" class="contact">@jamescryer</a></p>
		</footer>
	</div> <!-- eo #container -->

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="js/jquery.grumble.min.js?v=7"></script>
	<!--script src="js/Bubble.js?v=5"></script>
	<script src="js/jquery.grumble.js?v=5"></script-->

	<script>
	
		$('h1').grumble(
			{
				text: 'Bubble-tastic!', 
				angle: 85, 
				distance: 100, 
				showAfter: 500
			}
		);
	
		var isSequenceComplete = true;
		$('#ex1').click(function(e){
		
			e.preventDefault();
		
			if(isSequenceComplete === false) return true;
			isSequenceComplete = false;
			
			$('#grumble1').grumble(
				{
					text: '', 
					angle: 200, 
					distance: 3, 
					showAfter: 1000,
					hideAfter: 2000
				}
			);
			$('#grumble2').grumble(
				{
					text: 'Ohh, blue...', 
					angle: 180, 
					distance: 0, 
					showAfter: 2000,
					type: 'alt-', 
					hideAfter: 2000
				}
			);
			$('#grumble3').grumble(
				{
					text: 'Click me!',
					angle: 150,
					distance: 3,
					showAfter: 3000,
					hideAfter: false,
					hasHideButton: true, // just shows the button
					buttonHideText: 'Pop!'
				}
			);
			$('#grumble4').grumble(
				{
					text: 'Whoaaa, this is a lot of text that i couldn\'t predict',
					angle: 85,
					distance: 50,
					showAfter: 4000,
					hideAfter: 2000,
					onHide: function(){
						isSequenceComplete = true;
					}
				}
			);

		});
	
		$('#darkside').click(function(e){
			var $me = $(this), interval;
			
			e.preventDefault();
			
			$me.grumble(
				{
					angle: 130,
					text: 'Look at me!',
					type: 'alt-', 
					distance: 10,
					hideOnClick: true,
					onShow: function(){
						var angle = 130, dir = 1;
						interval = setInterval(function(){
							(angle > 220 ? (dir=-1, angle--) : ( angle < 130 ? (dir=1, angle++) : angle+=dir));
							$me.grumble('adjust',{angle: angle});
						},25);
					},
					onHide: function(){
						clearInterval(interval);
					}
				}
			);
		});
	
	</script>
	
	<script>
		var _gaq=[["_setAccount","UA-24631000-1"],["_trackPageview"]];
		(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
		g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
		s.parentNode.insertBefore(g,s)}(document,"script"));
	</script>

</body>
</html>